<template>
	<view class="reset-password-container">
		<image class="background-image" src="/static/images/backg.png" mode="aspectFill"></image>
		
		<view class="content-overlay">
			<view class="header">
				<text class="title">重置密码</text>
				<text class="subtitle">请设置您的新密码</text>
			</view>
			
			<view class="form-section">
				<view class="user-info">
					<text class="username">用户名：{{ username }}</text>
					<text class="reset-type">{{ resetTypeText }}</text>
				</view>
				
				<view class="input-group">
					<text class="label">新密码 <text class="required">*</text></text>
					<input 
						class="input" 
						type="password" 
						placeholder="请输入6-20位新密码" 
						v-model="formData.newPassword"
						maxlength="20"
					/>
				</view>
				
				<view class="input-group">
					<text class="label">确认新密码 <text class="required">*</text></text>
					<input 
						class="input" 
						type="password" 
						placeholder="请再次输入新密码" 
						v-model="formData.confirmPassword"
						maxlength="20"
					/>
				</view>
				
				<view class="password-tips">
					<text class="tip-title">密码要求：</text>
					<text class="tip-item">• 长度6-20位</text>
					<text class="tip-item">• 建议包含字母、数字和符号</text>
				</view>
				
				<button class="reset-btn" @click="handleResetPassword" :loading="loading">
					{{ loading ? '重置中...' : '确认重置' }}
				</button>
				
				<view class="back-link">
					<text class="link" @click="goBack">返回上一步</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			username: '',
			resetType: '',
			verificationData: {},
			formData: {
				newPassword: '',
				confirmPassword: ''
			},
			loading: false
		}
	},
	computed: {
		resetTypeText() {
			return this.resetType === 'security' ? '密保问题找回' : '邮箱验证找回';
		}
	},
	onLoad(options) {
		// 从页面参数获取验证信息
		if (options.username) {
			this.username = options.username;
		}
		if (options.resetType) {
			this.resetType = options.resetType;
		}
		
		// 从全局存储获取验证数据
		const verificationData = uni.getStorageSync('resetPasswordVerification');
		if (verificationData) {
			this.verificationData = verificationData;
		}
		
		// 如果没有验证数据，返回上一步
		if (!this.username || !this.resetType || !verificationData) {
			uni.showToast({
				title: '请先完成身份验证',
				icon: 'none'
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		}
	},
	methods: {
		validateForm() {
			if (!this.formData.newPassword.trim()) {
				uni.showToast({
					title: '请输入新密码',
					icon: 'none'
				});
				return false;
			}
			
			if (this.formData.newPassword.length < 6) {
				uni.showToast({
					title: '密码至少6位',
					icon: 'none'
				});
				return false;
			}
			
			if (this.formData.newPassword.length > 20) {
				uni.showToast({
					title: '密码最多20位',
					icon: 'none'
				});
				return false;
			}
			
			if (this.formData.newPassword !== this.formData.confirmPassword) {
				uni.showToast({
					title: '两次输入的密码不一致',
					icon: 'none'
				});
				return false;
			}
			
			return true;
		},
		
		async handleResetPassword() {
			if (!this.validateForm()) {
				return;
			}
			
			this.loading = true;
			
			try {
				const requestData = {
					username: this.username,
					resetType: this.resetType,
					newPassword: this.formData.newPassword,
					confirmPassword: this.formData.confirmPassword,
					...this.verificationData
				};
				
				const response = await uni.request({
					url: 'http://localhost:8080/user/resetPassword',
					method: 'POST',
					data: requestData,
					header: {
						'Content-Type': 'application/json'
					}
				});
				
				if (response.data.code === 200) {
					// 清除验证数据
					uni.removeStorageSync('resetPasswordVerification');
					
					uni.showToast({
						title: '密码重置成功',
						icon: 'success'
					});
					
					// 返回登录页
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/login/login'
						});
					}, 1500);
				} else {
					uni.showToast({
						title: response.data.message || '重置失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('重置密码失败:', error);
				uni.showToast({
					title: '网络错误，请稍后重试',
					icon: 'none'
				});
			} finally {
				this.loading = false;
			}
		},
		
		goBack() {
			uni.navigateBack();
		}
	}
}
</script>

<style lang="scss" scoped>
.reset-password-container {
	min-height: 100vh;
	position: relative;
	overflow: hidden;
}

.background-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.content-overlay {
	position: relative;
	z-index: 2;
	min-height: 100vh;
	padding: 40rpx;
}

.header {
	text-align: center;
	margin-bottom: 60rpx;
	
	.title {
		font-size: 48rpx;
		color: #ffffff;
		font-weight: bold;
		display: block;
		margin-bottom: 20rpx;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
	}
	
	.subtitle {
		font-size: 28rpx;
		color: #ffffff;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
	}
}

.form-section {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10rpx);
	border-radius: 20rpx;
	padding: 40rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);
	border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.user-info {
	text-align: center;
	margin-bottom: 40rpx;
	
	.username {
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
		display: block;
		margin-bottom: 10rpx;
	}
	
	.reset-type {
		font-size: 26rpx;
		color: #4CAF50;
		background: rgba(76, 175, 80, 0.1);
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		display: inline-block;
	}
}

.input-group {
	margin-bottom: 30rpx;
	
	.label {
		display: block;
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 15rpx;
		font-weight: 500;
		
		.required {
			color: #ff4757;
		}
	}
	
	.input {
		width: 100%;
		height: 80rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 10rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		background: #f8f9fa;
		
		&:focus {
			border-color: #4CAF50;
			background: #ffffff;
		}
	}
}

.password-tips {
	background: #fff3cd;
	border: 1rpx solid #ffeaa7;
	border-radius: 10rpx;
	padding: 20rpx;
	margin-bottom: 40rpx;
	
	.tip-title {
		font-size: 26rpx;
		color: #856404;
		font-weight: bold;
		display: block;
		margin-bottom: 10rpx;
	}
	
	.tip-item {
		font-size: 24rpx;
		color: #856404;
		display: block;
		line-height: 1.5;
	}
}

.reset-btn {
	width: 100%;
	height: 88rpx;
	background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
	color: #ffffff;
	border: none;
	border-radius: 44rpx;
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 30rpx;
	
	&:active {
		opacity: 0.8;
	}
}

.back-link {
	text-align: center;
	
	.link {
		color: #4CAF50;
		font-size: 28rpx;
		
		&:active {
			opacity: 0.7;
		}
	}
}
</style> 